<%@ page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	<link rel="stylesheet" href="${BASE_PATH }/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${BASE_PATH }/css/font-awesome.min.css">
	<link rel="stylesheet" href="${BASE_PATH }/css/main.css">
	<script src="${BASE_PATH }/jquery/jquery-2.1.1.min.js"></script>
    <script src="${BASE_PATH }/bootstrap/js/bootstrap.min.js"></script>
	<script src="${BASE_PATH }/script/docs.min.js"></script>
	 <script src="${BASE_PATH }/layer/layer.js" ></script>
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	table tbody tr:nth-child(odd){background:#F4F4F4;}
	table tbody td:nth-child(even){color:#C00;}
	</style>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li style="padding-top:8px;">
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i> 张三 <span class="caret"></span>
				  </button>
					  <ul class="dropdown-menu" role="menu">
						<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
						<li class="divider"></li>
						<li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
					  </ul>
			    </div>
			</li>
            <li style="margin-left:10px;padding-top:8px;">
				<button type="button" class="btn btn-default btn-danger">
				  <span class="glyphicon glyphicon-question-sign"></span> 帮助
				</button>
			</li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="tree">
				<ul style="padding-left:0px;" class="list-group">
					<li class="list-group-item tree-closed" >
						<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a> 
					</li>
					<li class="list-group-item">
						<span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;">
							<li style="height:30px;">
								<a href="user.html" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a> 
							</li>
							<li style="height:30px;">
								<a href="role.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a> 
							</li>
							<li style="height:30px;">
								<a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a> 
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a> 
							</li>
							<li style="height:30px;">
								<a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a> 
							</li>
							<li style="height:30px;">
								<a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a> 
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a> 
							</li>
							<li style="height:30px;">
								<a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a> 
							</li>
							<li style="height:30px;">
								<a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a> 
							</li>
							<li style="height:30px;">
								<a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a> 
							</li>
							<li style="height:30px;">
								<a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a> 
							</li>
							<li style="height:30px;">
								<a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a> 
							</li>
							<li style="height:30px;">
								<a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a> 
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed" >
						<a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a> 
					</li>
				</ul>
			</div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
			  <div class="panel-heading">
				<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
			  </div>
			  <div class="panel-body">
<form class="form-inline" role="form" style="float:left;">
  <div class="form-group has-feedback">
    <div class="input-group">
      <div class="input-group-addon">查询条件</div>
      <input class="form-control has-success" id="s_value" type="text" placeholder="账号/名称/邮箱">
    </div>
  </div>
  <button type="button" id="doSearch" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" onclick="deleteUsers()" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
 <hr style="clear:both;">
          <div class="table-responsive">
          
          <form id="userForm">
            <table class="table  table-bordered">
              <thead>
                <tr >
                  <th width="30">#</th>
				  <th width="30"><input id="selectAll" type="checkbox"></th>
                  <th>账号</th>
                  <th>名称</th>
                  <th>邮箱地址</th>
                  <th width="100">操作</th>
                </tr>
              </thead>
              <tbody id="userTables">
               
             
              </tbody>
			  <tfoot>
			     <tr >
				     <td colspan="6" align="center">
						<ul class="pagination">
								
								
							 </ul>
					 </td>
				 </tr>

			  </tfoot>
            </table>
            </form>
          </div>
			  </div>
			</div>
        </div>
      </div>
    </div>

 
       <script type="text/javascript">
        var pageSize =3;
            $(function () {
			    $(".list-group-item").click(function(){
				    if ( $(this).find("ul") ) {
						$(this).toggleClass("tree-closed");
						if ( $(this).hasClass("tree-closed") ) {
							$("ul", this).hide("fast");
						} else {
							$("ul", this).show("fast");
						}
					}
				});
			    initTables(1,$("#s_value").val());
            });
            $("tbody .btn-success").click(function(){
                window.location.href = "assignRole.html";
            });
            $("tbody .btn-primary").click(function(){
                window.location.href = "edit.html";
            });
            
            $("#doSearch").click(function(){
            	
            	 initTables(1,$("#s_value").val());
            });
            
            $("#selectAll").click(function(){            	
            	var flag = this.checked;
            	$("#userTables :checkbox").each(function(){
			    	this.checked=flag;
			    });
            	
            });
            
            function initTables( currenrPage,search_value){ 
            	var jsonData={currenrPage:currenrPage,pageSize:pageSize,search_value:search_value};
            	 var loadingIndex = null;
            	$.ajax({
            		type:'post',
            		url:'queryTableData',
            		data:jsonData,
            		beforeSend:function(){
            			loadingIndex = layer.msg('处理中', {icon: 16});
            		},
            		success:function (result){
            			layer.close(loadingIndex);
            			if(result.success){
            				var tableContent="";
            				var paginationContent="";            				
            				var users =result.data.users;           				
            				$.each(users,function(index,item){
            					tableContent +=	'<tr>';
                				tableContent +=	'<td>'+(index+1)+'</td>';
                				tableContent +=	'<td><input type="checkbox" name="userIds" value="'+item.id+'"></td>';
                				tableContent +=	'<td>'+item.loginacct+'</td>';
                				tableContent +=	'<td>'+item.username+'</td>';
                				tableContent +=	'<td>'+item.email+'</td>';
                				tableContent +=	'<td>';
                				tableContent +=	'<button type="button" onclick="assignRole(\''+item.id+'\')" title="分配角色 " class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>&nbsp;';
                				tableContent +=	'<button type="button" onclick="updateUser(\''+item.id+'\')" title="修改" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>&nbsp;';
                				tableContent +=	'<button type="button" onclick="deleteUser(\''+item.id+'\',\''+item.loginacct+'\')" title="删除" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
                				tableContent +=	'</td>';
                				tableContent +=	'</tr>';
            				});
            				
            				if(currenrPage>1){
            					/* paginationContent+='<li class="disabled"><a href="#" onclick="initTables('+(currenrPage-1)+')">上一页</a></li>'; */
            					paginationContent+='<li><a href="#" onclick="initTables('+(currenrPage-1)+')">上一页</a></li>'; 
            				}
            				
            				for (var i = 1; i <= result.data.pageTotal; i++) {								
            					if(i==currenrPage){
            						paginationContent+='<li class="active"><a href="#">'+i+'<span class="sr-only">(current)</span></a></li>';
            					}else{
            						
            						paginationContent+='<li><a href="#" onclick="initTables('+i+')">'+i+'</a></li>';
            					}
            					
							}
            				          				
            				
            				if(currenrPage<result.data.pageTotal){
            					paginationContent+='<li><a href="#" onclick="initTables('+(currenrPage+1)+')">下一页</a></li>';
            				}
            				
		
            				$("#userTables").html(tableContent);
            				$(".pagination").html(paginationContent);		
            				
            			}else{           				
            				 layer.msg("无法加载数据", {time:2000, icon:5, shift:6}, function(){
                              	
                             });
            			}
            		}
            		
            	});
            	
            }
            
            
            function updateUser( userId){
            	window.location.href="edit?userId="+userId;
            }
            function assignRole(userId){
            	window.location.href="assignRole?userId="+userId;
            }
            
            function deleteUser(userId,loginacct){             
              layer.confirm("确认删除账户"+loginacct+"?",  {icon: 2, title:'提示'}, 
            	function(cindex){
    			    layer.close(cindex);    				
    				 var loadingIndex = null;
    				
 			    	$.ajax({
 			    		type:'post',
 			    	    url:'deleteUser',
 			    	    data:{userId:userId},
 			    		beforeSend:function(){
 			    			loadingIndex = layer.msg('处理中', {icon: 16});
 			    		},
 			    		success:function(result){
 			    			layer.close(loadingIndex);
 			    			if(result.success){
 			    				window.location.href="user";
 			    			}else{
 			    				 layer.msg("用户删除失败，请重新尝试", {time:2000, icon:5, shift:6}, function(){
 			                      	
 			                     });
 			    			}
 			    		}
 			    	});   			        			      			       			    
    			}, function(cindex){
    			    layer.close(cindex);
    			   
    			});
            }
           
            
            function deleteUsers(){
            	
            	var boxes = $("#userTables :checkbox");
            	if(boxes.length==0){
            		 layer.msg("请先选择要删除的用户", {time:2000, icon:5, shift:6}, function(){
	                      	
                     });
            	}else{
            		
            		layer.confirm("确认删除？",  {icon: 3, title:'提示'}, function(cindex){
        			    layer.close(cindex);        			    
        			    var loadingIndex = null;
                		$.ajax({
                			type:'post',
                			url:'deleteUsers',
                			data:$("#userForm").serialize(),
                			beforeSend:function(){
                				loadingIndex = layer.msg('处理中', {icon: 16});
                			},
                			success:function(result){
                				layer.close(loadingIndex);
                				if(result.success){
     			    				window.location.href="user";
     			    			}else{
     			    				 layer.msg("用户删除失败，请重新尝试", {time:2000, icon:5, shift:6}, function(){
     			                      	
     			                     });
     			    			}
                			}
                		}); 
        			    
        			    
        			}, function(cindex){
        			    layer.close(cindex);
        			});
            		
            		
            	}
            	
            }
            
            
        </script>
  </body>
</html>
